<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" size="mini" inline>
      <el-form-item prop="projectName">
        <el-input v-model.trim="queryParams.param2" placeholder="请输入版本号"  style="width: 160px" />
      </el-form-item>
      <el-form-item prop="progressChkType">
        <el-select v-model="queryParams.param1" placeholder="检查项编码" style="width: 120px;" clearable>
          <el-option label="1" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item prop="progressChkType">
        <el-select v-model="queryParams.param1" placeholder="权重类型" style="width: 120px;" clearable>
          <el-option label="1" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <el-button icon="el-icon-refresh">重置</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="addVisible = true">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="检查项编码">
        <template slot-scope="{ row }">
          {{ row.code }}
        </template>
      </el-table-column>
      <el-table-column label="检查项版本">
        <template slot-scope="{ row }">
          {{ row.version }}
        </template>
      </el-table-column>
      <el-table-column label="检查项名称">
        <template slot-scope="{ row }">
          {{ row.chkitemName }}
        </template>
      </el-table-column>
      <el-table-column label="考核对象" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.cobj }}</span>
        </template>
      </el-table-column>
      <el-table-column label="组织" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="权重" align="center" min-width="160">
        <template slot-scope="{ row }">
          <div>
            <el-tag v-for="item in items" type="warning" style="margin:  0 10px 10px 0">{{item.name}}:{{item.rate}}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220" fixed="right" class-name="small-padding">
        <template slot-scope="{ row }">
          <!--<el-button type="primary" icon="el-icon-search">操作</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="编辑" :visible.sync="addVisible" :close-on-click-modal="false" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="170px">
        <el-form-item label="版本号" prop="projectId">
          <el-select v-model="form.projectId" placeholder="请选择" filterable clearable class="form-item">
            <el-option v-for="project in Options" :key="project.value" :label="project.label" :value="project.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="检查项" prop="projectId">
          <el-select v-model="form.projectId" placeholder="请选择" filterable clearable class="form-item">
            <el-option v-for="project in Options" :key="project.value" :label="project.label" :value="project.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="考核对象" prop="projectId">
          <el-select v-model="form.projectId" placeholder="请选择" filterable clearable  class="form-item">
            <el-option v-for="project in Options" :key="project.value" :label="project.label" :value="project.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="组织" prop="projectId">
          <el-select v-model="form.projectId" placeholder="请选择" filterable clearable  class="form-item">
            <el-option v-for="project in Options" :key="project.value" :label="project.label" :value="project.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="集群权重" prop="projectId">
          <el-input v-model="form.num" placeholder="请输入权重"  class="form-item"></el-input>
        </el-form-item>
<!--        <el-form-item label="事业部权重" prop="projectId">-->
<!--          <el-input v-model="form.num" placeholder="请输入权重"  class="form-item"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="事业部工程部" prop="projectId">-->
<!--          <el-input v-model="form.num" placeholder="请输入权重"  class="form-item"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="项目部权重" prop="projectId">-->
<!--          <el-input v-model="form.num" placeholder="请输入权重"  class="form-item"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item >
          <el-button type="primary">确 定</el-button>
          <el-button>取 消</el-button>
        </el-form-item >
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

export default {
  filters: {

  },
  data() {
    return {
      queryParams: {
        param1: '',
        param2: ''
      },
      list: [
        { code: 'GC-001-001-003-001', version: '20230402', chkitemName: '结构安全', cobj: '分管', type: '事业部', num: '10%', num1: '20%', num2: '10%'},
        { code: 'GC-001-001-003-002', version: '20230402', chkitemName: '施工安全', cobj: '经营单位', type: '城市公司', num: '10%', num1: '20%', num2: '10%'},
        { code: 'GC-001-002-001', version: '20230402', chkitemName: '防渗漏', cobj: '分管', type: '集群', num: '10%', num1: '20%', num2: '10%'},
        { code: 'GC-001-002-001', version: '20230402', chkitemName: '防渗漏', cobj: '分管', type: '项目', num: '10%', num1: '20%', num2: '10%'}
      ],
      items:[
        {name: '集群', rate: '10%'},
        {name: '事业部', rate: '20%'},
        {name: '事业部工程部', rate: '10%'},
        {name: '项目部', rate: '10%'}
      ],
      Options: [
        {label: '标题', value: '值'}
      ],
      form: {},
      rules: {},
      listLoading: false,
      addVisible: false
    }
  },
  created() {

  },
  methods: {

  }
}
</script>
<style>
  .form-item {
    width: 300px !important;
  }
</style>
